<template>
  <div class="message">
    <a-tabs v-model="tabKey" size="small" @change="tabChange">
      <a-tab-pane key="order" tab="订单">
        <!-- <div class="flex flex-align-c" slot="tab">
          <a-badge count="18" :offset="[13]">
            <span class="tab-title">订单</span>
          </a-badge>
        </div> -->
        <order ref="order" />
      </a-tab-pane>
      <a-tab-pane key="quota" class="message-quota" tab="额度">
        <!-- <div class="flex flex-align-c" slot="tab">
          <a-badge count="2" :offset="[13]">
            <span class="tab-title">额度</span>
          </a-badge>
        </div> -->
        <quota ref="quota" @reloadFinish="finishToTop" />
      </a-tab-pane>
      <a-tab-pane key="system" tab="系统">
        <!-- <div class="flex flex-align-c" slot="tab">
          <a-badge count="0" :offset="[13]">
            <span class="tab-title">系统</span>
          </a-badge>
        </div> -->
        <system ref="system" />
      </a-tab-pane>
    </a-tabs>
    <a-tooltip placement="top" :mouseEnterDelay="0.5">
      <template slot="title">
        刷新消息
      </template>
      <a-icon
        type="reload"
        class="reload primary cursor-pointer"
        style="font-size: 18px;"
        @click="reload"
      />
    </a-tooltip>
    <!-- <div
      class="handle flex flex-align-c"
      :class="[scrollTop > 0 ? 'showShadow' : '']"
    >
      <div class="button tc no-select">
        <span class="text cursor-pointer" @click="reload">
          <a-icon type="reload"></a-icon>刷新消息</span
        >
      </div>
      <a-divider type="vertical" />
      <div class="button tc no-select">
        <span class="text cursor-pointer" @click="readAll">
          <c-icon type="yidu"></c-icon>全部已读</span
        >
      </div>
    </div> -->
    <div class="toTop tc cursor-pointer" @click="toTop" v-if="scrollTop > 900">
      <c-icon type="zhiding"></c-icon>
    </div>
  </div>
</template>

<script>
import order from "./components/order";
import quota from "./components/quota";
import system from "./components/system";
import { throttle, debounce } from "@/util/common";

export default {
  components: {
    order,
    quota,
    system
  },
  data() {
    return {
      tabKey: "order",
      scrollTop: 0,
      elementTabpane: undefined // 当前显示的列表
    };
  },
  methods: {
    //   刷新消息后返回顶部
    finishToTop(tabKey) {
      let el = document.getElementsByClassName("message-" + tabKey)[0];
      el.scrollTop = 0;
    },
    // 返顶
    toTop() {
      this.elementTabpane.scrollTop = 0;
    },
    // 刷新消息
    reload: debounce(function() {
      this.$refs[this.tabKey].reload();
    }),
    readAll: debounce(function() {
      this.$refs[this.tabKey].readAll();
    }),
    // 切换消息列表时重新监听滚动事件，并解绑原来的监听事件
    tabChange() {
      this.elementTabpane.removeEventListener("scroll", this.setScrollTop);
      this.elementTabpane = undefined;
      this.init();
    },
    // 设置scrollTop
    setScrollTop: throttle(function() {
      this.scrollTop = this.elementTabpane.scrollTop;
    }),
    // 监听列表滚动，scrollTop为0时，操作行不显示底部阴影
    init() {
      this.$nextTick(() => {
        let el = document.getElementsByClassName("ant-tabs-tabpane-active");
        this.elementTabpane = el[el.length - 1];
        this.scrollTop = this.elementTabpane.scrollTop;
        this.elementTabpane.addEventListener("scroll", this.setScrollTop);
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.message {
  width: 360px;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
  ::v-deep .ant-tabs-bar {
    text-align: center;
    margin-bottom: 0;
    .ant-tabs-tab {
      // font-size: 16px;
      //   padding-top: 20px;
      //   padding-bottom: 14px;
    }
  }
  ::v-deep .ant-tabs-tabpane {
    // margin-top: 32px;
    padding: 0 8px;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  ::v-deep .head {
    padding: 0 10px;
    .avatar {
      color: #fff;
      text-align: center;
      width: 28px;
      height: 28px;
      line-height: 28px;
      border-radius: 50%;
      margin-right: 8px;
      .iconfont {
        margin: 0;
      }
    }
    .title {
      font-weight: 500;
      font-size: 15px;
    }
  }
  ::v-deep .content {
    color: rgba(0, 0, 0, 0.45);
    padding: 0 10px;
  }
  ::v-deep .foot {
    margin-top: 16px;
    padding: 0 10px;
    .date {
      color: rgba(0, 0, 0, 0.45);
    }
    .handle span.btn {
      cursor: pointer;
    }
  }
  ::v-deep .loadMore {
    padding: 10px 0;
  }
  ::-webkit-scrollbar-track {
    border-radius: 4px;
  }
  // .handle {
  //   position: absolute;
  //   top: 38px;
  //   width: 360px;
  //   height: 32px;
  //   line-height: 32px;
  //   border-bottom: 1px solid #e8e8e8;
  //   // background-color: #fafafa;
  //   transition: box-shadow 0.3s;
  //   .button {
  //     flex: 1;
  //     color: rgba(0, 0, 0, 0.65);
  //     .text i {
  //       margin-right: 8px;
  //     }
  //     .text:hover {
  //       color: var(--primary);
  //     }
  //   }
  // }
  // .showShadow {
  //   box-shadow: 0 7px 9px rgb(0 21 20 / 7%);
  //   border-color: #fff;
  //   background-color: #fff;
  // }
  .toTop {
    position: absolute;
    left: 50%;
    bottom: 58px;
    transform: translate(-50%);
    color: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
    .iconfont {
      margin: 0;
    }
  }
  .reload {
    position: absolute;
    top: 20px;
    right: 10px;
    transform: translateY(-50%);
  }
}
</style>
